<template>
  <q-layout view="lHh Lpr lFf">
    <q-header class="bg-grey-1 text-dui">
      <HeaderToolbar
        @toggle="toggleLeftDrawer"
        @editPWDialog="openEditPWDialog"
        @highlight="toggleHighlight"
      />
    </q-header>

    <!-- 对话框-修改密码 -->
    <q-dialog
      v-model="dialog.editPW"
      persistent
      @input="clearDialogForm"
    >
      <q-card style="width:400px">
        <q-card-section>
          <div class="q-pb-md text-h6">修改密码</div>
          <q-separator />
        </q-card-section>
        <q-card-section class="row items-center">
          <q-form
            class="q-gutter-y-md full-width"
            @submit.prevent.stop="editPW"
          >
            <q-input
              hide-bottom-space
              v-model="dialog.form.oldPW"
              outlined
              label="原密码"
              name="Password"
              :type="dialog.isPwdOld ? 'password' : 'text'"
              hint="请输入原密码"
              :rules="[val => !!val || '此项不能为空']"
            >
              <template v-slot:append>
                <q-icon
                  :name="dialog.isPwdOld ? 'mdi-eye-off' : 'mdi-eye'"
                  class="cursor-pointer"
                  @click="dialog.isPwdOld = !dialog.isPwdOld"
                />
              </template>
            </q-input>
            <q-input
              hide-bottom-space
              v-model="dialog.form.newPW"
              outlined
              label="新密码"
              name="newPassword"
              :type="dialog.isPwdNew ? 'password' : 'text'"
              hint="请输入新密码，密码应大于6位"
              :rules="[val => !!val || '此项不能为空']"
            >
              <template v-slot:append>
                <q-icon
                  :name="dialog.isPwdNew ? 'mdi-eye-off' : 'mdi-eye'"
                  class="cursor-pointer"
                  @click="dialog.isPwdNew = !dialog.isPwdNew"
                />
              </template>
            </q-input>
            <q-input
              hide-bottom-space
              v-model="dialog.form.confirmNewPW"
              outlined
              label="确认新密码"
              name="confirmNewPW"
              :type="dialog.isPwdConfirem ? 'password' : 'text'"
              hint="请再输入一次新密码"
              :rules="[val => !!val || '此项不能为空']"
            >
              <template v-slot:append>
                <q-icon
                  :name="dialog.isPwdConfirem ? 'mdi-eye-off' : 'mdi-eye'"
                  class="cursor-pointer"
                  @click="dialog.isPwdConfirem = !dialog.isPwdConfirem"
                />
              </template>
            </q-input>
            <q-separator />
            <q-card-actions align="right">
              <q-btn
                flat
                label="取消"
                color="primary"
                v-close-popup
              />
              <q-btn
                flat
                label="修改"
                color="primary"
                v-close-popup
                type="submit"
              />
            </q-card-actions>

          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      :dark="highlight.dark"
      :width="240"
    >
      <q-scroll-area class="fit">
        <q-list>
          <q-item-label
            header
            class="q-pt-sm q-pb-sm"
          >
            <img
              :src="highlight.logoWhite ? '/images/logo-white.png' : '/images/logo.png'"
              alt="流年后台管理系统"
            >
          </q-item-label>
          <NavBar
            :navData="asyncRoutes"
            class="q-mb-xl"
          />
        </q-list>
        <q-separator />
        <div class="q-pa-md">
          <div class="cus-copyright">Copyright © 2020. DUI All rights reserved.</div>
        </div>
      </q-scroll-area>
    </q-drawer>

    <q-page-container>
      <q-page padding>
        <Breadcrumbs />
        <router-view />
      </q-page>
    </q-page-container>

  </q-layout>
</template>

<script>
import HeaderToolbar from 'components/common/HeaderToolbar/HeaderToolbar.vue'
import NavBar from 'components/common/NavBar/NavBar.vue'
import Breadcrumbs from 'components/common/Breadcrumbs/Breadcrumbs.vue'
import asyncRoutes from 'router/asyncRoutes.js'
import routes from 'router/routes'

export default {
  name: 'MainLayout',
  components: {
    HeaderToolbar, 
    NavBar,
    Breadcrumbs
  },
  data () {
    return {
      leftDrawerOpen: true,
      NavBar,
      asyncRoutes,
      routes,
      dialog: {
        editPW: false,
        isPwdOld:true,
        isPwdNew:true,
        isPwdConfirem:true,
        form: {
          oldPW: '',
          newPW: '',
          confirmNewPW: ''
        }
      },
      highlight: {
        logoWhite: false,
        dark: false
      }
    }
  },
  methods: {
    toggleLeftDrawer(value) {
      this.leftDrawerOpen = value
    },
    // 打开编辑密码弹窗
    openEditPWDialog( value ) {
      this.dialog.editPW = value
    },

    // 更改侧边栏背景及logo是否反白
    toggleHighlight ( value) {
      this.highlight = value
    },

    // 更新密码
    editPW(evt) {
      if (this.dialog.form.newPW !== this.dialog.form.confirmNewPW ) {
        this.$utils.notify('确认密码与新密码不一致，请检查', 'red-8')
      } else {
        let _editResult = this.$utils.formatFormData(evt)
        delete _editResult.confirmNewPW
        _editResult.UserName = this.$store.state.Author
        this.$api.Account('UpUserPassword', _editResult).then (result => {
          // console.log(result)
          if ( result === 'success') {
            this.clearDialogForm()
            this.$utils.notify('密码修改成功！下次登录，请使用新密码', 'positive')
          } else if ( result === 'error' ) {
            this.$utils.notify('新密码不足6位，请重新修改', 'red-8')
          } else {
            this.$utils.notify(result, 'red-10')
          }
        }).catch (err => {
          console.log(err)
        })
      }
    },

    // 清除表单内容
    clearDialogForm() {
        this.dialog.form.oldPW = ''
        this.dialog.form.newPW = ''
        this.dialog.form.confirmNewPW = ''
        this.dialog.isPwdOld = true
        this.dialog.isPwdNew = true
        this.dialog.isPwdConfirem = true
    },
    // 动态生成路由/菜单
    asyncNavData(){
      if ( this.$store.state.Roles === '') {
        this.$router.push('/Login')
        this.$utils.notify('身份信息过期','red-8')
      } 
      else if ( this.$store.state.Roles !== 'all' ) {
        // console.log(this.$store.state.Roles)
        let _roles = this.$store.state.Roles.split(',')
        this.asyncRoutes = this.$utils.filterNavData( this.asyncRoutes, _roles)
      }
    },
  },
  created() {
    // 深度拷贝多维数组，重新赋值异步路由表和vue-router
    this.asyncRoutes = this.$utils.deepcopyArry(this.routes)
    // 重新生成动态菜单
    this.asyncNavData()
    this.$router.options.routes[0].children = this.$utils.deepcopyArry(this.asyncRoutes)
  },
}
</script>

<style lang="scss">
</style>


